<template>
  <div class="select-container">
    <div class="selectHotelsBox"
      :class="{firstCityLongTitle: locCity.name.length > 4, hideSortNearMeOption: false,isOperatedByUserAreaRange: isOperatedByUser.areaRange, isOperatedByUserPriceRange: isOperatedByUser.priceRange, isOperatedByUserSortRule: isOperatedByUser.sortRule}"
      @click="goSelectHotels()">
      <van-dropdown-menu :overlay="showSelectHotelMask">
        <van-dropdown-item ref="selectHotelsCity" :title="locCity.name" @open="selectHotelsCity"></van-dropdown-item>
        <van-dropdown-item ref="selectHotelsCalendar" title="时间11" @open="selectHotelsCalendar">
        </van-dropdown-item>
        <div class="timeBox" @click.stop="selectHotelsCalendar">
          <div>{{selectHotelsDateRange[0].substring(5)}}</div>
          <div>{{selectHotelsDateRange[1].substring(5)}}</div>
        </div>
        <van-dropdown-item :title="showHotelSelectTitle(hotelsAreaSelectThirdClassItems[hotelsAreaSelectThirdClassItems_activeIndex])" ref="selectHotelsArea" @open="selectHotelsArea()">
          <div class="areaBox">
            <div class="selectItemBox">
              <div class="firstClass">
                <p v-for="(item, index) in hotelsAreaSelectFirstClassItems" @click="clickOnAreaClassMenu('First',item, index)"
                  :class="{active: index == temporaryHotelAreaChoice.firstClassIndex && hotelsAreaSelectSecondClassItems.length == 0, activeWithSecond: index == temporaryHotelAreaChoice.firstClassIndex && hotelsAreaSelectSecondClassItems.length > 0}"
                  :key="item.filterName + index">
                  <var>{{item.filterName}}</var>
                  <svg v-if="index == temporaryHotelAreaChoice.firstClassIndex" class="chosenCircle" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="6" cy="6" r="5" fill="#06C584" stroke="white" stroke-width="2" />
                  </svg>
                </p>
              </div>
              <div class="secondClass" v-if="hotelsAreaSelectSecondClassItems.length > 0">
                <p v-for="(item, index) in hotelsAreaSelectSecondClassItems" @click="clickOnAreaClassMenu('Second',item, index)" :class="{active: index == temporaryHotelAreaChoice.secondClassIndex}"
                  :key="item.filterName + index">
                  <var>{{item.filterName}}</var>
                </p>
              </div>
              <div class="thirdClass" :class="{thirdClass_withSecond: hotelsAreaSelectSecondClassItems.length > 0}">
                <p v-for="(item, index) in hotelsAreaSelectThirdClassItems" @click="clickOnAreaClassMenu('Third',item, index)" :class="{active: index == temporaryHotelAreaChoice.thirdClassIndex}"
                  :key="item.filterName + index">
                  <var>{{item.filterName}}</var>
                  <svg class="chosenArrow" v-if="index == temporaryHotelAreaChoice.thirdClassIndex" width="19" height="14" viewBox="0 0 19 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M15.3662 0.575374C16.2784 -0.271964 17.6633 -0.171791 18.4594 0.799117C19.2249 1.73268 19.1673 3.13137 18.3508 3.99086L18.2492 4.09134L8.20112 13.4246C7.34735 14.2177 6.07438 14.1834 5.25963 13.3684L5.16024 13.2625L0.592944 8.07735C-0.235156 7.13722 -0.190402 5.66061 0.692904 4.77924C1.54224 3.93178 2.8576 3.94322 3.69371 4.78112L3.79168 4.88563L6.91161 8.428L15.3662 0.575374Z"
                      fill="#06C584" />
                  </svg>
                </p>
              </div>
            </div>
            <div class="clearAndConfirm">
              <div class="clear" @click="clearHotelsAreaChoice()">重置</div>
              <div class="confirm" @click="submitAreaChoice()">完成</div>
            </div>
          </div>
        </van-dropdown-item>
        <!-- 选择价格区间 用户修改了且区间变成0-1000+的时候 -->
        <van-dropdown-item ref="selectHotelsPrice" @open="selectHotelsPrice"
          :title="selectHotelsPriceRange[1] && selectHotelsPriceRangeHasChanged ? selectHotelsPriceRange[0] + '·' + this.selectHotelsPriceRange[1] : '价格星级' ">
          <div class="priceBox">
            <div class="title">
              <!-- 这里优先展示临时存储的价格区间，如果没有就展示实际的区间 -->
              <var>价格</var>
              <span>¥{{temporaryHotelPriceRangeChoice.startPrice > -1 ? temporaryHotelPriceRangeChoice.startPrice : selectHotelsPriceRange[0]}}-{{ temporaryHotelPriceRangeChoice.endPrice || selectHotelsPriceRange[1]}}</span>
              <div class="sliderBox">
                <!-- 默认切成一百等分 -->
                <van-slider v-model="selectHotelsPriceValPer" :step="selectHotelsPriceValPerStep" range active-color="#06C584" @change="handleHotelPriceRangeChange">
                  <template #button>
                    <div class="custom-button"></div>
                  </template>
                </van-slider>
                <!-- 尺子 -->
                <div class="ruler">
                  <span class="num" v-for="index of 8" :key="'rulerPer'+index">
                    {{ index == 8 ? '1000+' : selectHotelsPriceValPerStep * (index - 1) * 10}}
                  </span>
                </div>
              </div>
            </div>
            <div class="priceTagBox" v-if="priceRangeTemporaryTags.length > 0">
              <var>星级(可多选)</var>
              <div class="priceRangeTag">
                <!-- 这里展示临时存储的 -->
                <div v-show="item.filterName != '不限'" v-for="(item, index) in priceRangeTemporaryTags" @click="item.active = !item.active" :class="{active: item.active}"
                  :key="item.filterName + index">
                  {{item.filterName}}
                </div>
              </div>
            </div>
            <div class="clearAndConfirm">
              <div class="clear" @click="clearPriceRangeChoice()">清空选择</div>
              <div class="confirm" @click="submitPriceRangeChoice()">完成</div>
            </div>
          </div>
        </van-dropdown-item>
        <!-- 选择排序规则 -->
        <van-dropdown-item :options="hotelSortRuleOptions" :title="hotelSortRuleOptions[hotelSortRuleChosenIndex] ? hotelSortRuleOptions[hotelSortRuleChosenIndex].text : '智能排序'"
          v-model="hotelSortRuleChosenIndex" @open="selectHotelsSortRules" @change="submitHotelsSortRules()">
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>
    <!-- 酒店筛选--选择日期区间  :formatter="calendar_formatter" -->
    <van-calendar v-model="showCalendar" color="#05C485" :formatter="calendar_formatter" :default-date="calendarDefaultDate" type="range" @confirm="confirmCalendarDate" />
  </div>
</template>

<script>
// import { HollowArrow, SolidArrow } from '$root/components'
// import { HollowArrow, SolidArrow } from '../../dist/tcfe-helper.js';
import * as storage from '../../../util/storage'
import { format as formatDate, addDay, dateMinus } from '../../../util/date'
import { Calendar, DropdownItem, DropdownMenu } from 'vant'
import resultData from './baseData'
export default {
  name: 'el-selectMulti',
  components: {
    [Calendar.name]: Calendar,
    [DropdownItem.name]: DropdownItem,
    [DropdownMenu.name]: DropdownMenu
  },
  data() {
    return {
      locCity: { name: '上海', code: '321' }, // 当前城市
      showCalendar: false, // 展示酒店筛选日期区间组件
      calendarDefaultDate: null, // 默认不选择
      showSelectHotelMask: true, // 正常都是要遮罩，除了城市和时间的选择
      hotelSortRuleChosenIndex: 0, // 酒店排序规则
      hotelSortRuleOptions: [
        { text: '智能排序', value: 0 }, // 默认不能为空
        { text: '销量优先', value: 1 },
        { text: '低价优先', value: 2 },
        { text: '高价优先', value: 3 },
        { text: '好评优先', value: 4 },
        { text: '点评优先', value: 5 },
        { text: '综合排序', value: 6 }
      ],
      hotelsAreaSelectFirstClassItems: [],
      hotelsAreaSelectSecondClassItems: [],
      hotelsAreaSelectThirdClassItems: [],
      temporaryHotelAreaChoice: {
        // 临时暂存用户对区域的选择
        firstClassIndex: 0,
        secondClassIndex: 0,
        thirdClassIndex: 0
      },
      hotelsAreaSelectFirstClassItems_activeIndex: -1, // 选中的一级区域
      hotelsAreaSelectSecondClassItems_activeIndex: -1, // 选中的二级区域
      hotelsAreaSelectThirdClassItems_activeIndex: -1, // 选中的三级区域
      selectHotelsDateRange: ['', ''], // 酒店筛选的开始时间和结束时间
      selectHotelsPriceRange: [0, '1000+'], // 酒店筛选的价格起和价格止，默认是全部
      selectHotelsPriceRangeHasChanged: false, // 价格用户筛选过，不是刚开始了
      selectHotelsPriceValPer: [0, 100], // 当前选中的价格区间滑块的值
      selectHotelsPriceValPerStep: 15, // 跨度
      priceRangeResultTags: [
        { name: '经济', active: false },
        { name: '三星/舒适', active: false },
        { name: '四星/高档', active: false },
        { name: '五星豪华', active: false }
      ],
      priceRangeTemporaryTags: [
        { name: '经济', active: false },
        { name: '三星/舒适', active: false }
      ], // 临时存储，不确定 会被重置
      temporaryHotelPriceRangeChoice: {
        startPrice: 0,
        endPrice: 0
      },
      isOperatedByUser: {
        // 用户操作过，选择过，就变成active的状态，再重新拉取筛选项时重置为false
        areaRange: false,
        sortRule: false,
        priceRange: false
      },
      hotelSelectAllConditions: {}
    }
  },
  created() {
    const startDate = formatDate(new Date(), 'YYYY-MM-DD') // 开始时间，如果有行程，就是行程抵达时间，离开时间默认是+1天，如果没有就取今天和明天
    const endDate = addDay(1, startDate, 'YYYY-MM-DD')
    this.selectHotelsDateRange = [startDate, endDate]
    this.calendarDefaultDate = [new Date(startDate), new Date(endDate)]
    // 从接口拿到对应的筛选项数据，这里做mock 给个默认数据
    this.initData()
  },
  methods: {
    initData() {
      // console.log(resultData)
      let { sortingItems, priceStar, region } = resultData
      // 每次查询先重置
      this.hotelSortRuleOptions = []
      sortingItems.map((item, index) => {
        let sortRuleItem = {
          ...item,
          value: index, // !! 让索引和filterId 一致，让勾选对上，在传参去调酒店接口的时候要注意，要加回来
          text: item.sortingName
        }
        //  ** 如果没有经纬度或者当前选择的城市和定位城市不一致，现在后端都返回，前端来隐藏，避免排序选项指针出现问题，只在css层面隐藏排序距离我的选项
        this.hotelSortRuleOptions.push(sortRuleItem)
      })
      // console.log(this.hotelSortRuleOptions)
      let starArr = priceStar.filter(item => {
        return item.filterName == '星级'
      })
      this.priceRangeResultTags = starArr[0] ? starArr[0].filterList : []
      if (this.priceRangeResultTags.length > 0) {
        this.priceRangeResultTags.forEach(item => {
          item.active = false
        })
      }
      this.priceRangeTemporaryTags = [...this.priceRangeResultTags]
      // 如果 没有经纬度，需要把距离我选项干掉
      this.hotelsAreaSelectFirstClassItems = this.coords
        ? [...region]
        : [...region].filter(
            item => !(item.filterName && item.filterName.includes('距离我'))
          )
      // TODO 测试三级的情况
      // this.hotelsAreaSelectFirstClassItems.push(
      //     {
      //         filterId: 11,
      //         filterList: [
      //             {
      //                 filterId: 11,
      //                 filterList: [
      //                     { filterName: "你好啊", typeId: 11 },
      //                     { filterName: "你好啊哈", typeId: 11 }
      //                 ],
      //                 filterName: "你好啊",
      //                 typeId: 11
      //             }
      //         ],
      //         filterName: "你好啊",
      //         typeId: 11
      //     },
      //     {
      //         filterId: 11,
      //         filterList: [
      //             {
      //                 filterId: 11,
      //                 filterList: [
      //                     { filterName: "你好啊1", typeId: 11 },
      //                     { filterName: "你好啊1哈", typeId: 11 }
      //                 ],
      //                 filterName: "你好啊1",
      //                 typeId: 11
      //             }
      //         ],
      //         filterName: "你好啊1",
      //         typeId: 11
      //     }
      // )
      // TODO 测试三级的情况
      // if (this.locationType == 1) {
      //   // 有经纬度情况下，默认为第二个距离我
      //   this.clickOnAreaClassMenu('First', region[1], 1)
      //   this.hotelsAreaSelectFirstClassItems_activeIndex = 1 // 默认应该是1
      //   this.hotelsAreaSelectSecondClassItems_activeIndex = 0 // 默认就是第一项
      //   // 有经纬度会返回各个距离，取最后一个10km 作为默认
      //   this.hotelsAreaSelectThirdClassItems_activeIndex =
      //     this.hotelsAreaSelectThirdClassItems.length - 1 // 默认就是选中最后一个距离
      // } else {
      // 没有经纬度，就取热门的不限，有可能是没有不限，那就不传，且此时不选中第一个
      this.clickOnAreaClassMenu('First', region[0], 0)
      this.hotelsAreaSelectFirstClassItems_activeIndex = 0 // 默认应该是1
      if (
        this.hotelsAreaSelectThirdClassItems.length > 0 &&
        this.hotelsAreaSelectThirdClassItems[0].filterName == '不限'
      ) {
        this.hotelsAreaSelectThirdClassItems_activeIndex = 0 // 默认就是第一项
      } else {
        this.hotelsAreaSelectThirdClassItems_activeIndex = -1 // 此时不传这个区域，就是等同于全部区域筛选
      }
      this.hotelsAreaSelectSecondClassItems_activeIndex = 0 // 默认就是第一项
      // 初始化价格选取，以及排序依据选取
      this.selectHotelsPriceRange = [0, '1000+']
      this.selectHotelsPriceRangeHasChanged = false
      this.hotelSortRuleChosenIndex = 0 // 改回第一个智能排序
      // 初始化要把所有的选项重置为没选过，除了日期
      this.isOperatedByUser = {
        areaRange: false,
        sortRule: false,
        priceRange: false
      }
      this.doSearchHotelsAfterSelect(true)
    },
    showHotelSelectTitle(chosenItem) {
      // 如果是不限，记得也要把名称改成位置区域，且是回到未选中的状态
      if (
        (chosenItem && chosenItem.filterName == '不限') ||
        this.hotelsAreaSelectThirdClassItems_activeIndex == -1
      ) {
        // 没有不限的时候没有选择的初始状态，也改为灰色的位置区域
        // 变为未选择的初始状态
        this.isOperatedByUser.areaRange = false
      }
      return this.isOperatedByUser.areaRange &&
        chosenItem &&
        chosenItem.filterName != '不限'
        ? chosenItem.filterName
        : '位置区域'
    },
    // Vant日历日期添加法定节假日以及24节气
    calendar_formatter(day) {
      if (day.type === 'start') {
        day.bottomInfo = '入住'
      } else if (day.type === 'end') {
        day.bottomInfo = '离店'
      }
      return day
    },
    handleHotelPriceRangeChange(val) {
      // console.log(val)
      if (val[0] > 90) {
        // 最小值不能超过90
        this.temporaryHotelPriceRangeChoice.startPrice = 900
        this.$set(this.selectHotelsPriceValPer, 0, 90)
        return
      }
      // 左边超过或者等于右边的情况下，不能生效
      if (val[0] > val[1]) {
        this.$set(this.selectHotelsPriceValPer, 1, val[0] + 15)
        return
      }
      // 相等的处理
      if (val[0] == val[1]) {
        if (val[1] - 15 > -1) {
          this.$set(this.selectHotelsPriceValPer, 0, val[1] - 15)
          this.temporaryHotelPriceRangeChoice.startPrice = (val[1] - 15) * 10
          this.temporaryHotelPriceRangeChoice.endPrice =
            val[1] * 10 > 1000 ? '1000+' : val[1] * 10
        } else {
          // 退无可退，则不动
          this.$set(this.selectHotelsPriceValPer, 0, 0)
          this.$set(this.selectHotelsPriceValPer, 1, 15)
          this.temporaryHotelPriceRangeChoice.startPrice = 0
          this.temporaryHotelPriceRangeChoice.endPrice = 150
        }
        return
      }

      // this.$toast("¥" + val[0] + "-" + val[1])
      // 这时候还没有确定，要把相应的数据临时存储起来，用户点击确认的时候再用，否则就不修改，回归原来
      this.temporaryHotelPriceRangeChoice.startPrice = val[0] * 10
      this.temporaryHotelPriceRangeChoice.endPrice =
        val[1] * 10 > 1000 ? '1000+' : val[1] * 10
    },
    // 清空价格区域的选择
    clearPriceRangeChoice(type) {
      // 显示之前的选择，每次打开的时候
      if (type == 'lastStep') {
        this.temporaryHotelPriceRangeChoice = {
          startPrice: this.selectHotelsPriceRange[0],
          endPrice: this.selectHotelsPriceRange[1]
        }
        // ! 对数组的深拷贝，其中的对象依旧是浅拷贝，修改会被同步,因此需要做深拷贝
        const currentTagsStatus = JSON.parse(
          JSON.stringify(this.priceRangeResultTags)
        )
        this.priceRangeTemporaryTags = currentTagsStatus

        // 把价格滑块重置 数组值更新都要用this.$set
        this.$set(
          this.selectHotelsPriceValPer,
          0,
          this.selectHotelsPriceRange[0] / 10
        )
        if (this.selectHotelsPriceRange[1] == '1000+') {
          this.$set(this.selectHotelsPriceValPer, 1, 105)
        } else {
          this.$set(
            this.selectHotelsPriceValPer,
            1,
            this.selectHotelsPriceRange[1] / 10
          )
        }
      } else {
        // 否则就是简单的清空
        this.temporaryHotelPriceRangeChoice = {
          startPrice: 0,
          endPrice: '1000+'
        }
        this.priceRangeTemporaryTags.forEach(item => {
          // 只是临时重置，确认后才生效
          // 全部置为false
          item.active = false
        })
        this.$set(this.selectHotelsPriceValPer, 0, 0)
        this.$set(this.selectHotelsPriceValPer, 1, 105)
      }

      // console.log(this.selectHotelsPriceValPer)
    },
    submitPriceRangeChoice() {
      let shouldUpdateFlag = true
      if (
        this.selectHotelsPriceRange[0] ==
          this.temporaryHotelPriceRangeChoice.startPrice &&
        this.selectHotelsPriceRange[1] ==
          this.temporaryHotelPriceRangeChoice.endPrice &&
        JSON.stringify(this.priceRangeResultTags) ==
          JSON.stringify(this.priceRangeTemporaryTags)
      ) {
        shouldUpdateFlag = false
      }
      // 没有操作过不予赋值
      if (
        this.temporaryHotelPriceRangeChoice.startPrice != 0 ||
        this.temporaryHotelPriceRangeChoice.endPrice != 0
      ) {
        // 数组值更新都要用this.$set
        this.$set(
          this.selectHotelsPriceRange,
          0,
          this.temporaryHotelPriceRangeChoice.startPrice
        )
        this.$set(
          this.selectHotelsPriceRange,
          1,
          this.temporaryHotelPriceRangeChoice.endPrice
        )
      }
      if (this.temporaryHotelPriceRangeChoice.endPrice != 0) {
        // 用户自主选择才算修改过
        this.selectHotelsPriceRangeHasChanged = true
      }
      this.$refs.selectHotelsPrice.toggle(false)
      this.priceRangeResultTags = [...this.priceRangeTemporaryTags]

      // 去更新新价格数据
      if (shouldUpdateFlag) {
        // 用户操作过价格选项了
        this.isOperatedByUser.priceRange = true
        this.doSearchHotelsAfterSelect()
      }
      let chosenTags = this.priceRangeTemporaryTags.filter(
        item => item.active == true
      )
    },
    // 酒店位置区域确定选项
    submitAreaChoice() {
      let shouldUpdateFlag = true
      if (
        this.hotelsAreaSelectFirstClassItems_activeIndex ==
          this.temporaryHotelAreaChoice.firstClassIndex &&
        this.hotelsAreaSelectSecondClassItems_activeIndex ==
          this.temporaryHotelAreaChoice.secondClassIndex &&
        this.hotelsAreaSelectThirdClassItems_activeIndex ==
          this.temporaryHotelAreaChoice.thirdClassIndex
      ) {
        shouldUpdateFlag = false
      }
      this.hotelsAreaSelectFirstClassItems_activeIndex = this.temporaryHotelAreaChoice.firstClassIndex // 选中的一级区域
      this.hotelsAreaSelectSecondClassItems_activeIndex = this.temporaryHotelAreaChoice.secondClassIndex // 选中的二级区域
      this.hotelsAreaSelectThirdClassItems_activeIndex = this.temporaryHotelAreaChoice.thirdClassIndex // 选中的三级区域
      this.$refs.selectHotelsArea.toggle(false)
      if (shouldUpdateFlag) {
        // 用户操作过区域了
        this.isOperatedByUser.areaRange = true
        this.doSearchHotelsAfterSelect()
      }
    },
    // 筛选酒店日期区间
    confirmCalendarDate(date) {
      const [start, end] = date
      let { day: dateDiffer } = dateMinus(end, start)
      // console.log(dateDiffer)
      if (dateDiffer > 29) {
        this.$message({
          title: '温馨提示',
          message: `<div style="text-align: left;font-size: .28rem;width: 4.6rem;color: #666666;margin-left:0.1rem;">如果您需要在酒店入住30天以上，请拨打客服热线400-666-1166，或修改入住时间。</div>`,
          buttons: [
            {
              text: `<span style="color:#0DD66C;">确定</span>`,
              callback: () => {
                // this.$tcTrackEvent({
                //     category: "pphj_orderDetailsPage_returnticket_fobidden_popup",
                //     action: "returnticket_fobidden_popup_yes_click",
                //     opt_label: "线上申请退票阻止弹窗确认",
                //     opt_value: this.makeTrackValue()
                // })
              }
            }
          ],
          // 需要关闭按钮
          closeIcon: false
        })
        return
      }
      let shouldUpdateFlag = true
      if (
        formatDate(start, 'YYYY-MM-DD') == this.selectHotelsDateRange[0] &&
        formatDate(end, 'YYYY-MM-DD') == this.selectHotelsDateRange[1]
      ) {
        shouldUpdateFlag = false
      }
      this.showCalendar = false
      // console.log(date)
      this.selectHotelsDateRange[0] = formatDate(start, 'YYYY-MM-DD')
      this.selectHotelsDateRange[1] = formatDate(end, 'YYYY-MM-DD')
      if (shouldUpdateFlag) {
        this.doSearchHotelsAfterSelect()
      }
    },
    goSelectHotels() {
      // console.log(this.$refs.topOfLowestPriceZone)
      // 后面几个都是要滚动，前两个不滚动
      if (this.showSelectHotelMask) {
        // 点击筛选项时需要滚动到一定位置的，这里把对应元素加上如下方法
        // this.$refs.lowestPriceZone.scrollIntoView({
        //   behavior: 'auto',
        //   block: 'start'
        // })
      }
    },
    // 清空位置区域的选择
    clearHotelsAreaChoice(type) {
      // 每次打开时回到上一步确认选项
      if (type == 'lastStep') {
        // 模拟用户点击 确保第二级列表刷新至最新
        this.clickOnAreaClassMenu(
          'First',
          this.hotelsAreaSelectFirstClassItems[
            this.hotelsAreaSelectFirstClassItems_activeIndex
          ],
          this.hotelsAreaSelectFirstClassItems_activeIndex
        )
        if (this.hotelsAreaSelectSecondClassItems.length > 0) {
          // 确保第三级列表刷新至最新
          this.clickOnAreaClassMenu(
            'Second',
            this.hotelsAreaSelectSecondClassItems[
              this.hotelsAreaSelectSecondClassItems_activeIndex
            ],
            this.hotelsAreaSelectSecondClassItems_activeIndex
          )
        }
        // 清空是清空临时选择项，回到默认，这一步后做，先把前面列表刷新好
        this.temporaryHotelAreaChoice = {
          firstClassIndex: this.hotelsAreaSelectFirstClassItems_activeIndex,
          secondClassIndex: this.hotelsAreaSelectSecondClassItems_activeIndex,
          thirdClassIndex: this.hotelsAreaSelectThirdClassItems_activeIndex
        }
      } else {
        // 否则就是真的清空回到最初的选择
        //      this.temporaryHotelAreaChoice = {
        //     firstClassIndex: 0,
        //     secondClassIndex: 0,
        //     thirdClassIndex: 0
        // }
        // 初始化
        if (this.locationType == 1) {
          this.clickOnAreaClassMenu(
            'First',
            this.hotelsAreaSelectFirstClassItems[1],
            1
          )
          this.temporaryHotelAreaChoice.firstClassIndex = 1 // 默认应该是1
          this.temporaryHotelAreaChoice.secondClassIndex = 0
          this.temporaryHotelAreaChoice.thirdClassIndex = 0 // 默认就是选中第一个距离我的第一个子项
        } else {
          // 没有经纬度，就取热门的不限
          this.clickOnAreaClassMenu(
            'First',
            this.hotelsAreaSelectFirstClassItems[0],
            0
          )
          this.temporaryHotelAreaChoice.firstClassIndex = 0 // 默认应该是0
          if (
            this.hotelsAreaSelectThirdClassItems.length > 0 &&
            this.hotelsAreaSelectThirdClassItems[0].filterName == '不限'
          ) {
            this.temporaryHotelAreaChoice.thirdClassIndex = 0 // 默认就是选中第一个距离我的第一个子项
          } else {
            this.temporaryHotelAreaChoice.thirdClassIndex = -1 // 默认就不选中任何一项，没有不限的话
          }
          this.temporaryHotelAreaChoice.secondClassIndex = 0
        }
      }
    },
    // 酒店筛选排序方式
    selectHotelsSortRules() {
      this.showSelectHotelMask = true
    },
    submitHotelsSortRules() {
      // 用户操作过排序选项
      this.isOperatedByUser.sortRule = true
      this.doSearchHotelsAfterSelect()
    },
    // 酒店筛选位置区域
    selectHotelsArea() {
      this.clearHotelsAreaChoice('lastStep')
      this.showSelectHotelMask = true
    },
    clickOnAreaClassMenu(type, item, index) {
      if (type == 'First') {
        if (this.temporaryHotelAreaChoice.firstClassIndex != index) {
          // 如果是切换就重置
          this.temporaryHotelAreaChoice.secondClassIndex = 0 // 重置后面层级的指针
          this.temporaryHotelAreaChoice.thirdClassIndex = 0 // 重置后面层级的指针
        }
        this.temporaryHotelAreaChoice.firstClassIndex = index

        if (item.filterList && item.filterList.length > 0) {
          // 一般就两级，就第一和第二，如果出现了第三才给二级，再给三级
          if (
            item.filterList[0].filterList &&
            item.filterList[0].filterList.length > 0
          ) {
            this.hotelsAreaSelectSecondClassItems = item.filterList
            this.hotelsAreaSelectThirdClassItems = item.filterList[0].filterList
            this.temporaryHotelAreaChoice.secondClassIndex = 0
          } else {
            this.hotelsAreaSelectThirdClassItems = item.filterList
            // console.log(this.hotelsAreaSelectThirdClassItems)
            this.hotelsAreaSelectSecondClassItems = [] // 要重置
          }
        }
      } else if (type == 'Second') {
        if (this.temporaryHotelAreaChoice.secondClassIndex != index) {
          // 如果是切换就重置
          this.temporaryHotelAreaChoice.thirdClassIndex = 0 // 重置后面层级的指针
        }
        this.temporaryHotelAreaChoice.secondClassIndex = index
        if (item.filterList && item.filterList.length > 0) {
          this.hotelsAreaSelectThirdClassItems = item.filterList
        }
      } else if (type == 'Third') {
        this.temporaryHotelAreaChoice.thirdClassIndex = index
      }
    },
    // 酒店筛选价格
    selectHotelsPrice() {
      // 此时展示已选的内容
      // 清空是清空临时选择项，回到默认
      this.clearPriceRangeChoice('lastStep')
      this.showSelectHotelMask = true
      let chosenTags = this.priceRangeTemporaryTags.filter(
        item => item.active == true
      )
    },
    // 酒店筛选城市
    selectHotelsCity() {
      this.showSelectHotelMask = false

      // console.log('去选择城市')
      // this.goChooseCity('fromHotelsSelect')
      // this.$nextTick(() => {
      //   this.$refs.selectHotelsCity.toggle(false)
      // })
    },
    // 酒店筛选时间
    selectHotelsCalendar() {
      this.showSelectHotelMask = false
      this.$nextTick(() => {
        this.$refs.selectHotelsCity.toggle(false)
      })
      console.log('打开日历')

      this.showCalendar = true
      // 用来查看我们的价格区间最终的一个变化
      // console.log(this.selectHotelsPriceRange, this.temporaryHotelPriceRangeChoice)
      // console.log(this.hotelsAreaSelectFirstClassItems_activeIndex, this.hotelsAreaSelectSecondClassItems_activeIndex, this.hotelsAreaSelectThirdClassItems_activeIndex)
    },
    doSearchHotelsAfterSelect(justUpdateParams) {
      // console.log("带着过滤条件重新请求酒店列表")
      // console.log("日期信息::", this.selectHotelsDateRange)
      // // 有第二项的时候，就取第三个的结果，没有第二项的时候也是取第三项的结果
      // console.log("位置区域::", this.hotelsAreaSelectThirdClassItems[this.hotelsAreaSelectThirdClassItems_activeIndex])
      // console.log("价格星级::", this.selectHotelsPriceRange, this.priceRangeResultTags)
      // console.log(this.hotelSortRuleOptions[this.hotelSortRuleChosenIndex])
      let sortRule = {
        ...this.hotelSortRuleOptions[this.hotelSortRuleChosenIndex],
        filterId:
          this.hotelSortRuleOptions[this.hotelSortRuleChosenIndex].value + 1
      }
      // console.log(sortRule)
      // 特殊filterId typeId 对象集合
      let searchFeatures = []
      searchFeatures.push(sortRule)
      // alert(JSON.stringify(this.hotelsAreaSelectThirdClassItems))
      if (this.hotelsAreaSelectThirdClassItems_activeIndex > -1) {
        // 否则不传，不传也是全部显示，等同于不限，有些地方是这样，不返回不限
        searchFeatures.push(
          this.hotelsAreaSelectThirdClassItems[
            this.hotelsAreaSelectThirdClassItems_activeIndex
          ]
        )
      }
      // 激活选中的才传
      searchFeatures.push(
        ...this.priceRangeResultTags.filter(item => item.active == true)
      )

      // searchFeatures.push()
      // console.log("排序规则::", sortRule)
      this.hotelSelectAllConditions = {
        checkInDate: this.selectHotelsDateRange[0],
        checkOutDate: this.selectHotelsDateRange[1],
        sortingDirection: sortRule.sortingDirection,
        sortingMethod: sortRule.sortingMethod || sortRule.sortingName,
        searchFeatures,
        min: this.selectHotelsPriceRange[0],
        max:
          this.selectHotelsPriceRange[1] == '1000+'
            ? 1000000
            : this.selectHotelsPriceRange[1] // 避免报错，给个具体上限值
      }
      // 返回距离我模式
      // if (this.locationType == 1) {
      //     this.hotelSelectAllConditions.lat = this.coords.latitude
      //     this.hotelSelectAllConditions.lon = this.coords.longitude
      // }
      // console.log("刷新了，最终筛选结果:::", this.hotelSelectAllConditions)
      // alert(JSON.stringify(this.hotelSelectAllConditions))

      // if (!justUpdateParams) {
      //     const hotelIndex = this.Tabs.findIndex(item => {
      //         return item == "酒店"
      //     })
      //     // this.skuList_pure_hotel = [] // 重置酒店列表
      //     this.getSkuList(hotelIndex, "update")
      // }
      console.log('最新的各个状态::::', this.hotelSelectAllConditions)
    }
  }
}
</script>

<style lang="less" scoped>
@import '~$common/funs.less';
@import './index.less';
</style>
